<template>
  <view class="product" >
    <view class="product-img">
      <up-lazy-load
          height="140rpx"
          img-mode="aspectFit"
          :image="productData.productImageUrl"></up-lazy-load>

    </view>
    <view class="product-detail">
      <view class="p-tit">{{ productData.productName }}</view>
      <view class="p-tags" v-if="!isPoint">
        <template v-if="isOrder">
          <view class="tag-item tag-point"  v-if="productData.rewardType === 1">参与积分</view>
          <view class="tag-item tag-cashback"  v-if="productData.rewardType === 2">参与返现</view>
        </template>
        <template v-else>
          <view class="tag-item tag-point"  v-if="productData.joinAct === 1">可参与积分</view>
          <view class="tag-item tag-cashback" v-if="productData.joinAct === 1">可参与返现</view>
        </template>

      </view>
      <view class="p-desc">
        <view class="price">
          <text v-if="!isPoint">￥</text>
          <text class="price-num">{{ productData.price || productData.productPrice }}</text>
          <text v-if="isPoint">积分</text>
        </view>
        <view class="extar">
          <slot name="extar"><text>x {{ productData.productAmount }}</text></slot>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, defineProps, computed } from 'vue'
const props = defineProps({
  product: {
    type: Object,
    default: () => {}
  }
})
const productData = computed(()=> {
  return props.product || {}
})

const isOrder = computed(()=> {
  return productData.value?.orderType
})
const isPoint = computed(()=> {
  const { orderType , type} = productData.value
  return orderType === 2 || type === 2
})
function handleToDetail() {
  uni.navigateTo({
	url: `/pages/product/detail?pid=${productData.value.id}`
});
}
</script>

<style lang="scss" scoped>
.product{
  display: flex;
  flex: 1;
  .product-img{
    width: 140rpx;
    height: 140rpx;
    border-radius: 8rpx;
    overflow: hidden;
    margin-right: 24rpx;
  }
  .product-detail{
    width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .p-tit{
      font-weight: 400;
      font-size: 26rpx;
      color: #333333;
      line-height: 36rpx;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      margin-bottom: 14rpx;
    }
    .p-tags{
      display: flex;
      margin-bottom: 14rpx;
      column-gap: 16rpx;
      .tag-item{
        height: 32rpx;
        line-height: 32rpx;
        padding: 0 8rpx;
        border-radius: 5rpx;
        color: #fff;
        font-size: 18rpx;
      }
      .tag-point{
        background: #FFC300;
      }
      .tag-cashback{
        background: #3662EC;
      }
    }
    .p-desc{
      display: flex;
      justify-content: space-between;
      .price{
        font-weight: 400;
        font-size: 24rpx;
        color: #FA5151;
        line-height: 36rpx;
        .price-num{
          font-size: 32rpx;
          font-weight: bold;
        }
      }
      .extar{
        font-weight: 250;
        font-size: 24rpx;
        color: #999999;
        line-height: 36rpx;
      }
    }
  }
}
</style>
